<template>
  <div>
    <div class="wind">
      <div class="day" title="点击切换显示方式">
        <b @click="Tab(0)" :class="{Day}">日</b>
        <b @click="Tab(1)" :class="{Month}">月</b>
      </div>
      <div id="wind"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  props: {
    windData: {
      type: Array,
      default: []
    },
       Day:{
          type:Boolean,
      },
      Month:{
          type:Boolean

      }
  },
  watch: {
    windData() {
      this.GETwind();
    }
  },
  mounted() {},
  methods: {
      Tab(e){
          this.$emit("windTab",e)
      },
    GETwind() {
      this.wind(this.windData);
    },
    wind(wind) {
      var myChart = echarts.init(document.querySelector("#wind"));
      var weatherIcons = {};
      var directionMap = {};
      echarts.util.each(
        [
          "W",
          "WSW",
          "SW",
          "SSW",
          "S",
          "SSE",
          "SE",
          "ESE",
          "E",
          "ENE",
          "NE",
          "NNE",
          "N",
          "NNW",
          "NW",
          "WNW"
        ],
        //   方向
        function(name, index) {
          directionMap[name] = (Math.PI / 8) * index;
        }
      );
      var data = echarts.util.map(wind, function(entry) {
        return [entry.time, entry.medWS, entry.medWD];
      });
      var dims = {
        time: 0,
        windSpeed: 1,
        R: 2,
        minTemp: 3,
        maxTemp: 4
      };
      var arrowSize = 18;
      var weatherIconSize = 45;
      function renderArrow(param, api) {
        var point = api.coord([
          api.value(dims.time),
          api.value(dims.windSpeed)
        ]);
        return {
          type: "path",
          shape: {
            pathData: "M31 16l-15-15v9h-26v12h26v9z",
            x: -arrowSize / 2,
            y: -arrowSize / 2,
            width: arrowSize,
            height: arrowSize
          },
          rotation: directionMap[api.value(dims.R)],
          position: point,
          style: api.style({
            stroke: "#fff",
            lineWidth: 0.4
          })
        };
      }

      function renderWeather(param, api) {
        var point = api.coord([]);
      }
      //   悬停显示时间
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            return [
              echarts.format.formatTime(
                "MM-dd hh:mm",
                params[0].value[dims.time]
              ),
              "风速：" + params[0].value[dims.windSpeed],
              "风向：" + params[0].value[dims.R]
            ].join("<br>");
          }
        },
        grid: {
          top: 60,
          bottom: 10,
          right: 50,
          left: 20,
          containLabel: true
        },
        xAxis: {
          type: "time",
          name: this.Day ? "时间" : "日期",
          // maxInterval: 3600 * 1000 * 24,
          splitLine: {
            lineStyle: {
              color: "rgba(0,0,0,0.0)"
            }
          },
   
          axisLabel: {
            show: true,
            textStyle: {
              color: "#00d3ff", //更改坐标轴文字颜色
              fontSize: 10 //更改坐标轴文字大小
            }
          },
          axisLine: {
            lineStyle: {
              color: "#00d3ff" //更改坐标轴颜色
            }
          }
        },
        yAxis: [
          {
            name: "m/s",
            axisLine: {
              lineStyle: {
                color: "#666"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#0a1612"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00d3ff", //更改坐标轴文字颜色
                fontSize: 10 //更改坐标轴文字大小
              }
            },
            axisLine: {
              lineStyle: {
                color: "#00d3ff" //更改坐标轴颜色
              }
            }
          },

          {
            axisLine: {
              lineStyle: {
                color: "rgba(0,0,0,0.0)"
              }
            },
            splitLine: { show: false }
          },
          {
            axisLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false }
          }
        ],
        visualMap: {
          type: "piecewise",
          show: false,
          orient: "horizontal",
          top: 1,
          left: 250,
          pieces: [
            {
              gte: 17,
              color: "#2cf5ff",
              label: "大风（>=17节）"
            },
            {
              gte: 11,
              lt: 17,
              color: "#46fac3",
              label: "中风（11  ~ 17 节）"
            },
            {
              lt: 17,
              color: "#0072ff",
              label: "微风（小于 11 节）"
            }
          ],
          textStyle: {
            color: "#fff", //更改坐标轴文字颜色
            fontSize: 10 //更改坐标轴文字大小
          },
          seriesIndex: 1,
          dimension: 1
        },
        series: [
          {
            type: "line",
            yAxisIndex: 1,
            showSymbol: false,
            hoverAnimation: false,
            symbolSize: 1,
            smooth:"none",

            smooth: true,
            lineStyle: {
              normal: {
                color: "rgba(88,160,253,0.0)"
              }
            },
            itemStyle: {
              normal: {
                color: "rgba(88,160,253,0.0)"
              }
            },
            encode: {
              x: dims.time,
              y: dims.waveHeight
            },
            data: data,
            z: 1
          },
          {
            type: "custom",
            smooth: true,

            renderItem: renderArrow,
            encode: {
              x: dims.time,
              y: dims.windSpeed
            },
            data: data,
            z: 10
          },
          {
            type: "line",

            encode: {
              x: dims.time,
              y: dims.windSpeed
            },
            lineStyle: {
              normal: {
                color: "#aaa",
                type: "dotted"
              }
            },
            data: data,
            z: 1
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
@import url("../../assets/css/day.css");
.wind {
  position: relative;
width: 445px;
  height: 301px;
}
#wind {
 width: 445px;
  height: 301px;
}
</style>